<template>

	<view class="content">
		<view class="box-bg">

		</view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style=" background-color: #0000ff; color: #0055ff; width: 100%; position: fixed; height: 100upx;  z-index: 999;">
			<mh_segmentbar v-bind:curIndex=curMenuIndex :menuData="topMenuDatas" style="width: 100%;overflow: hidden;" ref="segmentbar"
			 @didSelectTopMenuItem="didSelectTopMenuItem" />
		</view>		
		<!-- spaceView -->
		<!-- <view style=" width: 100%; height: 100upx;"></view> -->
		<view style=" width: 100%; margin-top: 100rpx; height: 94%; position: absolute;">
			<!-- <swiper style=" width: 100%; position: absolute; overflow: scroll; height: 100% ;"
			 duration="300" :current="curMenuIndex" @change="changeSwipe" >
				
				<swiper-item v-for="menuItem in topMenuDatas" v-bind:key="menuItem.id" style="overflow: overlay; flex: 1; height: 100%; ">
					<scroll-view style=" width: 100%; height: 100%;" scroll-y="true" @scroll="scrollToppp">
						<swiperContent ref="childView" @onStartRefreash="onStartRefreash" @onEndRefreash="onEndRefreash"> </swiperContent>
						
					</scroll-view>
				</swiper-item>
			</swiper> -->


			<view v-if="curMenuIndex==0">
				<swiperContent ref="childView" @onStartRefreash="onStartRefreash" @onEndRefreash="onEndRefreash">
				</swiperContent>
			</view>
			<view v-if="curMenuIndex==1">
				<swiperContent2 ref="childView" @onStartRefreash="onStartRefreash" @onEndRefreash="onEndRefreash">
				</swiperContent2>
			</view>
		</view>
	</view>
</template>

<script>
	import mh_segmentbar from "../../components/mh-segmentbar/mh-segmentbar.vue"
	import swiperContent from "../../components/swiperContent/swiperContent.vue"
	import swiperContent2 from "../../components/swiperContent/swiperContent2.vue"
	export default {
		components: {
			mh_segmentbar,
			swiperContent,
			swiperContent2
		},
		onLoad() {
			// let that=this;
			// this.qinqiu(that);
		},
		onShow() {

		},

		data() {
			return {
				topMenuDatas: [{
					"id": 1,
					"name": "精选"
				}, {
					"id": 2,
					"name": "论坛"
				}],
				curMenuIndex: 0
				// luntanLists: [{
				// 	"id": 1,
				// 	"title": "诈骗犯为什么要诈骗老年人",
				// 	"imagetouxian": "https://avatars2.githubusercontent.com/u/24265249?s=40&v=4",
				// 	"imagetupian": "https://avatars2.githubusercontent.com/u/24265249?s=40&v=4",
				// 	"username": "彬彬刘",
				// 	"content": "我以为诈骗年轻人的做法已经非常严重了，结果还是难逃老年人也中枪",
				// 	"dianzanshu": "45",
				// 	"pinglunshu": "56",
				// 	"shoucangshu": "12",
				// 	"dz": 0,
				// 	"pl": 0,
				// 	"sc": 0
				// }, {
				// 	"id": 2,
				// 	"title": "s",
				// 	"imagetouxian": "https://avatars2.githubusercontent.com/u/24265249?s=40&v=4",
				// 	"imagetupian": "https://avatars2.githubusercontent.com/u/24265249?s=40&v=4",
				// 	"username": "彬彬刘",
				// 	"content": "我以为诈骗年轻人的做法已经非常严重了，结果还是难逃老年人也中枪",
				// 	"dianzanshu": "4",
				// 	"pinglunshu": "5",
				// 	"shoucangshu": "10",
				// 	"dz": 0,
				// 	"pl": 0,
				// 	"sc": 0
				// }, {
				// 	"id": 3,
				// 	"title": "诈骗犯为什么要诈骗老年人",
				// 	"imagetouxian": "https://avatars2.githubusercontent.com/u/24265249?s=40&v=4",
				// 	"imagetupian": "https://avatars2.githubusercontent.com/u/24265249?s=40&v=4",
				// 	"username": "彬彬刘",
				// 	"content": "我以为诈骗年轻人的做法已经非常严重了，结果还是难逃老年人也中枪",
				// 	"dianzanshu": "42",
				// 	"pinglunshu": "23",
				// 	"shoucangshu": "1",
				// 	"dz": 0,
				// 	"pl": 0,
				// 	"sc": 0
				// }]
			}
		},

		/* 刷新  将刷新的页面索引传到content子页面中 在子页面进行请求*/
		onPullDownRefresh() {
			this.$refs.childView[this.curMenuIndex].refreashData(this.curMenuIndex) //传入页面 

		},

		methods: {
			/* 点击顶部菜单时 切换视图 */
			didSelectTopMenuItem(index) {
				if (this.curMenuIndex !== index) {
					this.curMenuIndex = index
				}
			},


			/* 手机滑动切换视图 */
			changeSwipe(event) {
				let cuIndex = event.detail.current
				this.$refs.segmentbar.didSelectItem(cuIndex) //改变顶部

				//在页面切换的时候停止刷新 
				this.onEndRefreash()
				this.$refs.childView[cuIndex].willShowPage(cuIndex) //如果不想在子页面请求数据， 在本页请求数据后再传入子页面也行  
			},


			/* 子页面主动请求刷新 */
			onStartRefreash() {
				uni.startPullDownRefresh()
			},

			/* 停止刷新 */
			onEndRefreash() {
				uni.stopPullDownRefresh()
			},
			scrollToppp(e) {
				//检测scrollView是否滑到顶部  在此可设置刷新开关 currentWebView设置
			},
			// qinqiu(that) {
			// 	uni.request({
			// 		url: 'http://127.0.0.1:8080/luntandata/luntandatalist', //仅为示例，并非真实接口地址。
			// 		method: 'GET',
			// 		data: {

			// 		},
			// 		header: {
			// 			// 'custom-header': 'hello' //自定义请求头信息
			// 		},
			// 		success: (res) => {
			// 			// console.log(res.data.data);
			// 			console.log(this.luntanLists);
			// 			// console.log(that._data.kkk);
			// 			// console.log(that.luntanLists);
			// 		}
			// 	});
			// },
		}

	}
</script>


<style>
	page {
		background-image: url(@/static/bg.png);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
	}

	* {
		padding: 0%;
		margin: 0%;
	}

	image {
		display: flex;
	}

	.content {
		flex: 1;

		width: 100%;
		background-color: green;
		overflow: hidden;
	}


	.nowrap {

		white-space: nowrap;

		overflow-x: scroll;

		height: 200px;

	}

	.item-t {

		display: inline-block;

		width: 100%;

		height: 200px;

		background: yellow;

		vertical-align: top;

	}

	.status_bar {
		padding-top: var(--status-bar-height);
		width: 100%;
		background-color: #3069ae;
	}
</style>
